<template>
	<view style="min-height: 100vh;background-color: #FFFFFF;">
		<view>
			<view class="model-title">已获得勋章</view>
			<view class="acquire-model" :class="{ collapse: !cardFlag }" v-if="hasMedal">
				<view v-for="(item, index) in getCardList" :key="index" class="item" :class="{ shadow: !item.noShadow }" @click="make(item, true)">
					<image :src="item.medalImgUrl" mode="aspectFit"></image>
					<view class="title">{{ item.medalName }}</view>
				</view>
				<!-- <view v-if="cardList.length < 8" class="model_img ">
					<view v-for="(item, index) in cardList" :key="index" class="item" @click="make(item)">
						<image :src="item.medalImgUrl" mode="aspectFill"></image>
						<view class="title">{{ item.medalName }}</view>
					</view>
				</view> -->
			</view>
			<view class="no-model" v-else>
				<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/empty_list.png"></image>
				<view class="title">什么也没有，快去获取勋章吧!</view>
			</view>

			<view v-if="cardList.length > 8" class="model-footer">
				<view @click="cardFlag = !cardFlag" class="model-toggle" :class="{ expand: cardFlag }">{{ cardFlag ? '收起' : '展开' }}</view>
			</view>
		</view>
		<view class="cloud"></view>
		<view>
			<view class="model-title" style="padding-top: 0rpx;">勋章墙</view>
			<view class="all-model" :class="{ collapse1: !cardFlag1 }">
				
				<view v-for="(item, index) in getCardList1" :key="index" class="item shadow" @click="make(item, false)">
					<image :src="item.medalImgUrl" class="gray" mode="aspectFit"></image>
					<view class="title">{{ item.medalName }}</view>
				</view>
				
			</view>
			<view v-if="cardList1.length > 12" class="model-footer" style="padding-bottom: 40rpx;">
				<view @click="cardFlag1 = !cardFlag1" class="model-toggle" :class="{ expand: cardFlag1 }">{{ cardFlag1 ? '收起' : '展开' }}</view>
			</view>
		</view>

		<uni-popup ref="popup" type="center" style="z-index:999;">
			<uni-popup-model :modelList.sync="modelListA" ></uni-popup-model>
		</uni-popup>
	</view>
</template>

<script>
import http from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniPopup from '@/components/uni-popup/uni-popup-scroll.vue';
import uniPopupModel from '@/components/uni-popup/uni-popup-model.vue';
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	data() {
		return {
			cardFlag: false,
			cardList: [],
			cardFlag1: false,
			cardList1: [],
			cardListBF: [],
			list: [],
			name: '',
			img: '',
			medalType: 0,
			specialCont: '',
			modelListA: [],
			hasMedal: true
		};
	},
	components: {
		uniIcons,
		uniPopup,
		uniPopupModel
	},
	computed: {
		getCardList() {
			return this.cardFlag ? this.cardList : this.cardList.slice(0, 8);
		},
		getCardList1() {
			return this.cardFlag1 ? this.cardList1 : this.cardList1.slice(0, 12);
		}
	},
	mounted() {
		this.modelList();
	},
	methods: {
		modelList() {
			Promise.all([
				new Promise(resolve => {
					http('/api/cusUserInfo/getSysMedalGrantDetail', { data: {}, method: 'GET' }).then(result => {
						let data = result.data || [];
						resolve(data);
					});
				}),
				new Promise(resolve => {
					http('/api/cusUserInfo/getSysMedalGrantInfoNotAvailable', { data: {}, method: 'GET' }).then(result => {
						let data = result.data || [];
						resolve(data);
					});
				})
			]).then(res => {
				const [cardList, cardList1] = res;
				this.hasMedal = cardList.length !== 0;
				this.cardList1 = [...cardList1];
				const cardListLength = cardList.length;
				if (cardListLength < 8) {
					this.cardList = [...cardList, ...this.getFixedMedal(8 - cardListLength)] || [];
				} else {
					this.cardList = [...cardList, ...this.getFixedMedal(4 - (cardListLength % 4))] || [];
				}
			});
		},
		getFixedMedal(length) {
			const list = [];
			while (length--) {
				list.push({
					noShadow: true,
					medalName: '',
					medalImgUrl: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/empty_medal.png'
				});
			}
			return list;
		},
		make(cont, tag) {
			if (!cont.medalId) {
				return;
			}
			this.$refs.popup.open();
			let name = cont.medalName
			http('/api/sysMedalTask/medal/' + cont.medalId, { data: {}, method: 'GET' }).then(
				result => {
					let data = result.data || {};
					if(tag) {
						const level = cont.medalLevel, currentLevels = [];
						data.forEach(item => {
							if (item.medalLevel <= level) {
								currentLevels.push(item)
								// this.modelListA = [item];
							}
						});
						this.modelListA = currentLevels;
					} else {
						this.modelListA = data
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		}
	}
};
</script>

<style lang="less" scoped>

/deep/.uni-popup__wrapper-box {
	position: absolute !important;
	left: 40rpx;
	right: 40rpx;
}
.model_img {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	flex-wrap: wrap;
	image {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
	}
}
.no-model {
	text-align: center;
	image {
		width: 300rpx;
		height: 170rpx;
	}
	.title {
		margin-top: 12rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #66645D;
	}
}
.acquire-model,
.all-model {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	margin: 0 20rpx;
	overflow: hidden;
	.item {
		text-align: center;
		margin-bottom: 30rpx;
		width: 25%;
		&.shadow {
			background: url(https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/medal_shadow.png) center no-repeat;
			background-size: auto 100%;
		}
		image {
			width: 100rpx;
			height: 100rpx;
			margin: 0 33rpx;
		}
		.title {
			font-size: 20rpx;
			color: #66645d;
			margin-top: 10rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			padding: 0 12rpx;
		}
	}
}
.model-title {
	font-size: 36rpx;
	font-weight: 400;
	color: #66645d;
	line-height: 50rpx;
	padding: 40rpx 0 32rpx 40rpx;
}
.model-footer {
	text-align: center;
	.model-toggle {
		text-align: center;
		font-size: 22rpx;
		font-weight: 400;
		color: #8a8c8d;
		line-height: 34rpx;
		padding-right: 30rpx;
		display: inline-block;
		background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/pulldown_icon.png) no-repeat center right;
		background-size: 20rpx 23rpx;
	}

	.expand {
		background-image: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/pullup_icon.png) !important;
	}
}

.cloud {
	background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/home/lines.png) no-repeat top #fff;
	background-size: contain;
	height: 100rpx;
	margin-top: 40rpx;
}
</style>
